<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Product } from "@/api";
import { ElMessage } from 'element-plus';
let tableData = ref([]);

// 列表
let init_form = reactive({
    page: 1,
    limit: 15,
    rule_name: '',
})
let count = ref(0)
let load_attr_list = async () => {
    let { status, msg, data } = await Product.product_rule(init_form)
    tableData.value = data.list;
    count.value = data.count;
}
// 分页
let handlePage = (current) => {
    init_form.rule_name = current;
    load_attr_list();
}
// 搜索
let search_rule_name = () => {
    load_attr_list();
}
//dialog-----form
let rule_form = ref({
    rule_name: '',
    spec: []
})
// 修改规格
let is_product_rule = ref(false);
let rule_id = ref(0)
let handle_edit_rule = async (id) => {
    rule_id.value = id;
    if (rule_id.value === 0) {
        is_product_rule.value = true;
    } else {
        let { status, msg, data } = await Product.product_rule_info(id)
        if (status) {
            is_product_rule.value = true;
            console.log(data);
            rule_form.value = data.info
        }
    }

}
onMounted(() => {
    load_attr_list();
})
// 删除规格
let remove_rule = (index) => {
    rule_form.value.spec.splice(index, 1)
}
// 删除标签
let handleClose = (i, tag) => {
    console.log(rule_form.value.spec[i].detail);
    rule_form.value.spec[i].detail.splice(rule_form.value.spec[i].detail.indexOf(tag), 1)
}
// 添加标签
let new_tab = ref('');
let handle_add_tab = (i) => {
    rule_form.value.spec[i].detail.push(new_tab.value)
    new_tab.value = '';
}
// 添加规格
let is_add_rule = ref(false);
let add_rule_form = ref({
    value: '',
    detail: [],
});
let handle_add_rule = () => {
    rule_form.value.spec.push(add_rule_form.value);
    is_add_rule.value = false;
    add_rule_form.value = {
        value: '',
        detail: [],
    }

}
// 保存
let handle_save_tabs = async () => {
    let { status, msg } = await Product.save_product_rule(rule_id.value, rule_form.value);
    console.log(status, msg);
    load_attr_list();

    is_product_rule.value = false
}
// 删除
let remove_attr = async (id) => {
    let ids = '';
    if (id) {
        ids = `${id}`;
    } else {
        if (checked_tableItem_id.value.length === 0) {
            ElMessage({
                message: '请选择用户',
                type: 'warning',
                duration: 5000,
            })
            return
        } else {
            ids = checked_tableItem_id.value.toString();
        }

    }
    ElMessageBox.confirm(
        '是否确认删除?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let { status, msg } = await Product.remove_product_rule({ ids: ids })
            if (status == 200) {
                ElMessage.success(msg)
                load_attr_list();
            } else {
                ElMessage.error(msg)
            }
        })
        .catch(() => {
            ElMessage.info('取消')
        })
}
// 选中的table数据项的id数组
let checked_tableItem_id = ref([])
// 改变选择表格某一项时 -- 包含CheckBoxItem，CheckBoxAll
const handleChangeCheckBox = (selection) => {
    if (selection.length !== 0) {
        selection.map((item, index) => {
            checked_tableItem_id.value.push(item.id)
        })
    } else {
        checked_tableItem_id.value = []
    }
}

let handle_close = () => {
    rule_form.value = {
        rule_name: '',
        spec: []
    }
}
</script>

<template>
    <el-card class="box-card">
        <el-form :inline="true" :model="init_form" class="demo-form-inline">
            <el-form-item style="width: 30%;" label="规格搜索">
                <el-input v-model="init_form.rule_name" style="width: 80%;" placeholder="请输入规格名称" />
                <el-button type="primary" @click="search_rule_name">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="d-flex" style="margin-bottom: 20px;">
            <el-button type="primary" @click="handle_edit_rule(0)">添加分类</el-button>
            <el-button @click="remove_attr()">批量删除</el-button>
        </div>
        <el-table :data="tableData" @selection-change="handleChangeCheckBox" style="width: 100%" border
            :header-cell-style="{ backgroundColor: '#ececec' }">
            <el-table-column type="selection" />
            <el-table-column prop="id" label="ID" width="80" align="center" />
            <el-table-column prop="rule_name" label="规格名称" />
            <el-table-column prop="attr_name" label="商品规格" />
            <el-table-column prop="attr_value" label="商品属性">
                <template #default="scope">
                    <p v-for="item in scope.row.attr_value">{{ item }}</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <el-button link type="primary" @click="handle_edit_rule(scope.row.id)" size="small">编辑</el-button>
                    <el-button link type="primary" @click="remove_attr(scope.row.id)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin-top: 20px;" justify="end" align="middle">
            <span style="margin-right: 10px;">共 {{ count }} 条</span>
            <el-pagination @current-change="handlePage" :page-size="init_form.limit" background
                layout="prev, pager, next,jumper" :total="count / init_form.limit" />
        </el-row>
    </el-card>
    <el-dialog v-model="is_product_rule" title="商品规格" @close="handle_close">
        <el-form :inline="true" :model="rule_form" label-width="100px">
            <el-form-item label="规格模板名称" prop="rule_name">
                <el-input v-model="rule_form.rule_name" style="width: 80%;"></el-input>
            </el-form-item>
            <div v-for="(item, index) in rule_form.spec">
                <el-form-item :value="item.value">
                    <span>{{ item.value }}</span>
                    <el-icon @click="remove_rule(index)">
                        <CircleCloseFilled></CircleCloseFilled>
                    </el-icon>
                </el-form-item>
                <el-form-item :value="item.detail" style="display: flex;">
                    <el-tag class="tag-style" v-for="tag in item.detail" closable @close="handleClose(index, tag)"
                        :key="tag">{{ tag }}</el-tag>
                    <el-input v-model="new_tab" style="width: 150px;">
                        <template #append>
                            <el-button @click="handle_add_tab(index)" type="primary">添加</el-button>
                        </template>
                    </el-input>
                </el-form-item>
            </div>
            <div v-show="is_add_rule">
                <el-form-item style="width:30%" label="规格名称">
                    <el-input v-model="add_rule_form.value"></el-input>
                </el-form-item>
                <el-form-item style="width:30%" label="规格值">
                    <el-input v-model="add_rule_form.detail[0]"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handle_add_rule" type="primary">确定</el-button>
                    <el-button @click="is_add_rule = false" type="primary">取消</el-button>
                </el-form-item>
            </div>

            <el-form-item>
                <el-button v-show="!is_add_rule" @click="is_add_rule = true" type="primary">
                    <el-icon>
                        <Plus></Plus>
                    </el-icon>
                    <span>添加新规格</span>
                </el-button>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="handle_save_tabs">保存</el-button>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped>
.tag-style {
    margin: 5px;
}
</style>